<template>
<div class="container">
    <div class="card">
        <div class="card-body">
            <i class="el-icon-info" style="color:#b4cae8;"></i> 你好,{{this.adminName}},本次登录时间: {{ loginTime | FormatTime }}
        </div>
    </div>
    <div class="card">
        <div class="card-header">资产数据概览</div>
        <div class="card-body">
            <dataPanel></dataPanel>
        </div>
    </div>
    <div class="card fast-process">
        <div class="card-header">资产操作快速申请通道</div>
        <div class="card-body">
            <el-row type="flex" :gutter="20">
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-1"></i>
                            <p>资产调拨申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-2"></i>
                            <p>资产领用申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="/ProcessList/create">
                            <i class="icon icon-process-2"></i>
                            <p>资产维修申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-3"></i>
                            <p>资产申报申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-4"></i>
                            <p>资产调拨申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-5"></i>
                            <p>资产申报申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-6"></i>
                            <p>资产复用申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-7"></i>
                            <p>资产报废申请</p>
                        </router-link>
                    </div>
                </el-col>
                <el-col>
                    <div class="process-item">
                        <router-link to="#">
                            <i class="icon icon-process-8"></i>
                            <p>资产停用申请</p>
                        </router-link>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="card recent-application">
        <div class="card-header">近期资产操作动态
            <el-button @click="toAllPrecoss" type="primary" size="mini" style="float:right;">查看全部流程 ></el-button>
        </div>
        <div class="card-body">
            <el-table stripe :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="申领标题" width="">
                </el-table-column>
                <el-table-column prop="date" label="操作时间" width="220">
                </el-table-column>
                <el-table-column prop="province" label="责任人" width="180">
                </el-table-column>
                <el-table-column prop="city" label="操作类型" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="130">
                  <template slot-scope="scope">
                      <el-button @click="toProcessDetail(scope.row.processId)" type="text" size="small">查看流程 ></el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import { SET_TIME_YYMMDDHHMM } from "@/utils/formatTime.js";
import dataPanel from "@/components/DataPanel"
export default {
  name: "Main",
  components: {
    dataPanel
  },
  data() {
    return {
      tableData: [
        {
          processId: "lc0003",
          date: "2019-04-01",
          name: "<涉密资产设备领用申请>",
          province: "王小虎",
          city: "维修",
        },
        {
          processId: "lc0004",
          date: "2016-05-04",
          name: "<涉密资产设备申请出借>",
          province: "张小龙",
          city: "维修",
        },
        {
          processId: "lc0005",
          date: "2016-05-01",
          name: "<涉密资产设备申请出借>",
          province: "李小凤",
          city: "维修",
        },
        {
          processId: "lc0006",
          date: "2016-05-03",
          name: "<涉密资产设备申请出借>",
          province: "张勇",
          city: "维修",
        },
        {
          processId: "lc0007",
          date: "2016-05-03",
          name: "<涉密资产设备申请出借>",
          province: "李珊珊",
          city: "维修",
        },
        {
          processId: "lc0008",
          date: "2016-05-03",
          name: "<涉密资产设备申请出借>",
          province: "黄国俊",
          city: "维修",
        }
      ]
    };
  },
  methods: {
    toProcessDetail(id) {
      console.log(id);
      this.$router.push({
        path: "/ProcessList/ProcessDetail" + "?id=" + id
      });
    },
    toAllPrecoss() {
      this.$router.push({ path: "/ProcessList" });
    },
    toCreateProcess() {
      this.$router.push({
        path:'/ProcessList/create'
      })
    }
  },
  mounted() {
    //请求获取dashBorad 数据
  },
  computed: {
    ...mapGetters(["adminName", "loginTime"])
  },
  filters: {
    FormatTime: function(time) {

      if (time == "") {
        return "怎么会没时间";
      } else {
        return SET_TIME_YYMMDDHHMM(Number(time));
      }
    }
  }
};
</script>

<style lang="less" scoped>
.fast-process {
  .process-item {
    text-align: center;
    a {
      color: #fff;
      padding-top: 2rem;
      padding-bottom: 2rem;
      display: block;
      background: #98cbef;
      border-radius: 4px;
      transition: ease-in 0.3s;
      i {
        font-size: 1.5rem;
      }
      p {
        margin-top: 5px;
      }
    }
    a:hover {
      background: #2a63dc;
      transition: ease-in 0.1s;
      transform: scale(1.1);
    }
  }
}

.recent-application {
  .card-header {
    overflow: hidden;
  }
  .el-button {
    margin-top: 7px;
  }
}
</style>
